<template>
  <el-header class="main-header" style="height:4.375rem;">
    <nav :class="''" class="navbar navbar-static-top">
      <a class="logo" href="#" style="text-align:center">
        <span class="logo-lg">
          <img src="/img/logo.png" alt="logo" style="width:2.5rem;height:2.5rem;vertical-align: middle;">
          <span class="adminName" style="display:inline-block;vertical-align: middle; font-size: 1.25rem;">仲恺信计健康系统</span>
        </span>
      </a>
      <a href="#" class="sidebar-toggle" @click.prevent="emit('toggle-sidebar')">
        <span class="sr-only"></span>
      </a>
      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <li class="user user-menu">
            <el-dropdown trigger="click" placement="bottom-end">
              <span class="el-dropdown-link dropdown-toggle" style="display: flex; align-items: center; color: #fff; height: 100%; padding: 0 0.9375rem; text-decoration: none; cursor: pointer;">
                <img src="/img/user2-160x160.jpg" class="user-image" alt="User Image" style="width:2.5rem;height:2.5rem;">
                <span class="hidden-xs">仲恺信计</span>
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu class="user-dropdown-menu">
                  <li class="user-header">
                    <img src="/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    <p>
                      仲恺信计
                      <small>研发部</small>
                    </p>
                  </li>
                  <li class="user-footer">
                    <div class="pull-left">
                      <el-dropdown-item>
                        <a class="btn btn-default btn-flat" href="#">修改密码</a>
                      </el-dropdown-item>
                    </div>
                    <div class="pull-right">
                      <el-dropdown-item>
                        <a class="btn btn-default btn-flat" href="#">注销</a>
                      </el-dropdown-item>
                    </div>
                  </li>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>
        </ul>
      </div>
    </nav>
  </el-header>
</template>

<script setup>
import { defineEmits } from 'vue';
// 引入 Element Plus 的向下箭头图标
import { ArrowDown } from '@element-plus/icons-vue';
// 如果需要侧边栏切换图标，可以引入其他图标，例如 Fold
// import { Fold } from '@element-plus/icons-vue';

// 定义组件可以触发的自定义事件
const emit = defineEmits(['toggle-sidebar']);
</script>

<style scoped>
/* Header.vue 自身的样式，注意清除 Element Plus 默认样式的影响 */
.main-header {
  min-height: 4.375rem; /* 70px / 16 = 4.375rem */
  padding: 0; /* 移除 Element Plus 默认 padding */
  box-sizing: border-box; /* 盒模型为内容-边框 */
}

.navbar {
  height: 4.375rem; /* 70px / 16 = 4.375rem */
  background: linear-gradient(to right, #0abdfe, #67f0e0); /* 渐变背景 */
  display: flex; /* Flexbox 布局 */
  justify-content: space-between; /* 子元素两端对齐 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  padding: 0 1rem; /* 左右内边距 */
}

.logo {
  height: 100%; /* 相对于父元素 navbar 的高度 */
  display: flex; /* Flexbox 布局 */
  align-items: center; /* 垂直居中 logo 内容 */
  padding: 0 0.9375rem; /* 15px / 16 = 0.9375rem */
  color: #fff; /* Logo 文本颜色 */
  text-decoration: none; /* 移除下划线 */
}

.adminName {
  margin-left: 0.625rem; /* 10px / 16 = 0.625rem (图标与文字间距) */
}

.user-image {
  border-radius: 50%; /* 圆形图片 */
  width: 2.5rem; /* 40px / 16 = 2.5rem */
  height: 2.5rem;
  object-fit: cover; /* 确保图片不变形 */
}

.sidebar-toggle {
  color: #fff; /* 按钮颜色 */
  font-size: 1.5rem; /* 24px / 16 = 1.5rem */
  padding: 0 0.9375rem; /* 15px / 16 = 0.9375rem */
  cursor: pointer; /* 鼠标悬停显示手型 */
  text-decoration: none; /* 移除下划线 */
  display: flex; /* 使图标居中 */
  align-items: center;
  justify-content: center;
}

.navbar-custom-menu .user-menu .el-dropdown-link {
  /* 确保 Element Plus 下拉触发器样式符合你的预期 */
  display: flex;
  align-items: center;
  color: #fff;
  height: 100%;
  padding: 0 0.9375rem; /* 15px / 16 = 0.9375rem */
  text-decoration: none; /* 移除下划线 */
}

/* 针对 Element Plus 的 el-dropdown-menu 进行样式调整 */
/* 移除了对 position, right, left, margin-top 的强制设置，让 Element Plus 智能定位 */
.user-dropdown-menu.el-dropdown-menu {
  min-width: 10rem; /* 160px / 16 = 10rem */
  border-radius: 0.25rem; /* 4px / 16 = 0.25rem */
  box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.1); /* 阴影 */
  list-style: none; /* 移除列表点 */
  padding: 0;
  background-color: #fff;
}

/* 下拉菜单头部样式 */
.user-header {
  background-color: #3c8dbc;
  padding: 0.625rem; /* 10px / 16 = 0.625rem */
  text-align: center;
  color: #fff;
}

.user-header img {
  width: 5rem; /* 80px / 16 = 5rem */
  height: 5rem;
  border-radius: 50%;
  margin-bottom: 0.625rem; /* 10px / 16 = 0.625rem */
}

/* 下拉菜单底部样式 */
.user-footer {
  padding: 0.625rem; /* 10px / 16 = 0.625rem */
  background-color: #f9f9f9;
  display: flex;
  justify-content: space-between;
  gap: 0.625rem; /* 按钮之间的间距 */
}

.user-footer .pull-left,
.user-footer .pull-right {
  flex: 1; /* 让左右两边平分空间 */
}

/* 按钮样式应用于 el-dropdown-item 内部的 a 标签 */
.user-footer .el-dropdown-item a.btn {
  font-size: 0.875rem; /* 14px / 16 = 0.875rem */
  padding: 0.3125rem 0.625rem; /* 5px -> 0.3125rem, 10px -> 0.625rem */
  text-decoration: none; /* 移除下划线 */
  color: #333;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  background-color: #fff;
  display: block; /* 使 a 标签填充 el-dropdown-item 的空间 */
  width: 100%; /* 填充父容器 */
  text-align: center; /* 文本居中 */
}

/* 移除 Element Plus 默认的 item padding，以便自定义按钮样式生效 */
.user-dropdown-menu .el-dropdown-item {
  padding: 0; /* 移除默认内边距 */
  margin: 0; /* 移除默认外边距 */
}
</style>